<template>
  <div class="homecontainer _homecontainer">
    <GoodBriefInfo
      :goodname="'一枪换一弹'"
      :goodinfo="'超越极限，不止于胜利'"
      :fontcolor="'#ffffff'"
      :backgoundcolor="'#010101'"
      :imgsrc="require('./imgs/iphone11.jpg')"
      class="wow animate__animated animate__fadeIn"
    />
    <GoodBriefInfo
      :goodname="'这一刻'"
      :goodinfo="'在这里，每个人都是传奇的缔造者'"
      :fontcolor="'#000000'"
      :backgoundcolor="'#f3f3f3'"
      :imgsrc="require('./imgs/iphonese+.jpg')"
      class="wow animate__animated animate__fadeIn"
      data-wow-delay="1s"
    />
    <GoodBriefInfo
      :goodname="'兄 弟'"
      :goodinfo="'与世界顶级选手同台竞技，证明你的实力'"
      :fontcolor="'black'"
      :backgoundcolor="'#f3f3f3'"
      :imgsrc="require('./imgs/ipadpro.jpg')"
      class="wow animate__animated animate__fadeIn"
      data-wow-delay="1s"
    />
    <div class="subdiv _subdiv">
      <div class="left">
        <GoodBriefInfo
          :goodname="'饰 品'"
          :goodinfo="'不只是皮肤，更是一种寄托'"
          :backgoundcolor="'#ffffff'"
          :fontcolor="'black'"
          :imgsrc="require('./imgs/airpodspro.jpg')"
          class="wow animate__animated wow animate__slideInLeft"
          data-wow-delay="0.5s"
        />
      </div>
      <div class="right">
        <GoodBriefInfo
          :goodname="'我 们'"
          :goodinfo="'挑战自我，超越极限，成就非凡'"
          :fontcolor="'white'"
          :backgoundcolor="'#060f18'"
          :imgsrc="require('./imgs/macbookpro.jpg')"
          class="wow animate__animated animate__slideInRight"
          data-wow-delay="0.5s"
        />
      </div>
    </div>
    <div class="subdiv _subdiv">
      <div class="left">
        <GoodBriefInfo
          :goodname="'签 名'"
          :goodinfo="'梦想从不只是梦，脚踏实地才能走得更远'"
          :backgoundcolor="'rgb(0, 0, 0)'"
          :fontcolor="'white'"
          :imgsrc="require('./imgs/wwdc20.jpg')"
          class="wow animate__animated wow animate__slideInLeft"
          data-wow-delay="0.5s"
        />
      </div>
      <div class="right">
        <GoodBriefInfo
          :goodname="'对 待'"
          :goodinfo="'每一局比赛，都是全新的开始。'"
          :fontcolor="'black'"
          :backgoundcolor="'#ffffff'"
          :imgsrc="require('./imgs/watch.jpg')"
          class="wow animate__animated animate__slideInRight"
          data-wow-delay="0.5s"
        />
      </div>
    </div>
    <asn-go-top />
  </div>
</template>

<script>
import GoodBriefInfo from "./subcomponents/GoodBriefInfo";

export default {
  name: "",
  components: {
    GoodBriefInfo,
  },
};
</script>

<style lang="less" scoped>
// 大于800px
@media only screen and (min-width: 800px) {
  .homecontainer {
    font-size: 1vw;
    .subdiv {
      width: 100%;
      display: flex;
      justify-content: space-around;
      font-size: 0.5em;
      .left {
        width: 48%;
        height: 100%;
        font-size: 0.8em;
      }
      .right {
        width: 48%;
        height: 100%;
        font-size: 0.8em;
      }
    }
  }
}

// 小于800px
@media only screen and (max-width: 800px) {
  ._homecontainer {
    font-size: 1vw;
    ._subdiv {
      width: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      font-size: 0.5em;
      .left {
        width: 100%;
        height: 100%;
        font-size: 0.8em;
      }
      .right {
        width: 100%;
        height: 100%;
        font-size: 0.8em;
      }
    }
  }
}
</style>
